<template>
	<view>
		<view class="editPhoneNum">
			<view class="num">请输入:{{ phoneNum }}收到的短信验证码</view>
			<view class="phoneValue">
				<input type="number" maxlength="6" @blur="codeblurs" v-model="codes" placeholder="请输入验证码" />
				<view class="codep" v-if="!codeStatus" @click="getCodeClick">获取验证码</view>
				<view :class="['codep', codeStatus ? 'codepTime' : '']" v-else>{{ countTime }}</view>
			</view>
			<view class="error" :class="codeError ? 'error show' : 'error'">{{ codeError }}</view>
		</view>
		<view class="bottom"><view @click="handleComfire" :class="[codeError.length ? 'disabled' : '']">确定</view></view>
	</view>
</template>

<script>
import { getNewCode,getUserMessage } from '@/apis/login.js';
// getUserMsg判断手机号码和验证码是否正确
import { hanleToken } from '@/utils/utils.js';
import { update } from '@/apis/personalCenter.js';
export default {
	data() {
		return {
			nextDisabled: true,
			error: '',
			codeStatus: false,
			countTime: '',
			codes:'',
			phoneNum:'',
			codeError:'',
			codeData:{} // 验证码数据
		};
	},
	onLoad(e) {
  	this.phoneNum = e.data;
	},
	methods: {
		// 输入验证码
		codeblurs(e) {
			console.log('验证', e);
			let val = e.detail.value || 0;
			if (!val) {
				this.codeError = '请输入验证码';
			} else {
				if (!/^[0-9]{6}$/g.test(val)) {
					this.codeError = '请输入正确验证码';
				} else {
					this.codeError = '';
				}
			}
		},
		// 获取验证码
		getCodeClick() {
			console.log('点击了验证码');
			getNewCode({
				phone: this.phoneNum
			})
				.then(res => {
					if (res.code === 200) {
						this.codeData = res.data || {};
						this.codeStatus = true;
						this.getCodeNetwork();
					} else {
						this.codeStatus = false;
					}
				})
				.catch(err => {
					this.codeStatus = false;
					uni.showModal({
						title: '提示',
						content: '手机号尚未加入通讯录无法登入,请联系公司负责人添加您的信息。',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							}
						}
					});
				});
		},
		// 验证码倒计时
		getCodeNetwork() {
			var hTime = 59;
			this.countTime = '重新获取(59)';
			this.timers = setInterval(() => {
				if (hTime <= 0) {
					this.countTime = '获取验证码';
					this.codeStatus = false;
					clearInterval(this.timers);
					return;
				}
				this.countTime = '重新获取(' + hTime + ')';
				hTime--;
			}, 1000);
		},
	    handleComfire() {
			console.log('确定修改,跳转登录页');
			const params = {
				grant_type: 'phone',
				scope: 'all',
				phone:this.phoneNum, 
				tenantId:hanleToken('get', 'userData').tenant_id,
				id:this.codeData.id,
				value:this.codes
			};
			getUserMessage(params,this.codeData.id)
				.then( async res=>{
					console.log(res,'登录接口');
					if (res) {
						let info = hanleToken('get','personalInfo');
						update({...info,phone:this.phoneNum})
							.then(res=>{
								if (res) {
									console.log(res,'修改电话成功');
									uni.reLaunch({
							  url: '/pages/login/index'
									});
								}
							});
					}
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.editPhoneNum {
	background-color: #f3f6f8;
	height: 100vh;
	padding: 32rpx;
	box-sizing: border-box;
	.num {
		font-weight: 600;
		color: #333;
		font-size: 28rpx;
	}
	.tip {
		color: #666;
		font-size: 26rpx;
		margin: 16rpx 0 32rpx 0;
	}
	.phoneValue {
		height: 80rpx;
		background: #ffffff;
		border-radius: 8rpx;
		padding: 0 28rpx;
		margin-top: 32rpx;
		display: flex;
		input {
			display: flex;
			flex: 1;
			height: 100%;
		}
	}
	.error {
		font-size: 24rpx;
		color: #e02020;
		width: 200rpx;
	}
	.codep {
		font-size: 28rpx;
		color: #0091ff;
		font-weight: 600;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
}
.bottom {
	height: 98rpx;
	width: 100%;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	bottom: 0;
	width: 100%;
	view {
		height: 70rpx;
		width: 720rpx;
		color: #fff;
		background: #0091ff;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.disabled {
		background: #efefef;
	}
}
</style>
